import React,{ useEffect, useState } from 'react'
import '../../Layout/Securi.css'
import smcar from '../../assets/threeimg/smcar.png'
import carimg from '../../assets/threeimg/three.png'
import wudi from '../../assets/threeimg/wudi.gif'
import ThreeTable from '../../component/childThree/ThreeTable'
function Lntelligent() {

useEffect(() => {  
 
}, []);
  return (
    <div className='Scontainer'>

      <div className='Sleft'>

        <div className='SLtop'>
          <b className='ss1'>监控情况</b>
        </div>
        <div className='SLleft'>
          <div><img src={smcar} alt="" />

          <div className='smcar'>
            <p><b>1号楼</b></p>
            <p><b>设备数量：500</b></p>
            <p>正常设备:<span className='gree'>250</span>&emsp; 故障设备：<span className='red'>120</span></p>
          </div>      

        </div>


 <div><img src={smcar} alt="" />

          <div className='smcar'>
            <p>2号楼</p>
            <p><b>设备数量：400</b></p>
            <p>正常设备:<span className='gree'>250</span>&emsp; 故障设备：<span className='red'>120</span></p>
          </div>      

        </div>


 <div><img src={smcar} alt="" />

          <div className='smcar'>
            <p>3号楼</p>
            <p><b>设备数量：450</b></p>
            <p>正常设备:<span className='gree'>250</span>&emsp; 故障设备：<span className='red'>120</span></p>
          </div>      

        </div>





        
        </div>


        <div className='SLtop1'>
          <b className='ss1'>门禁情况</b>
        </div>
        <div className='Sxiao'></div>


         <div className='SLtop1'>
          <b className='ss1'>值班情况</b>
          
        </div>
        <div className='SLleft1'>
         <ThreeTable></ThreeTable>
        </div>




       <div className='Scenter'>
       <div className='cend'>
         <img src={carimg} alt="" className='cenimg'/>
       </div>


      </div> 
           
      </div>



     






      <div className='Sright'>

        <div className='SRight1'>
          <div className='SRtop1'>
            <b className='ss2'>监控画面</b>
          </div>
        
        {/* small1 */}
         <div className='SLright1'>
          <img src={wudi} alt="" />
         
        </div>

         {/* small2 */}
         <div className='SLright1'>
        <img src={wudi} alt="" />
         
        </div>

         {/* small3 */}
         <div className='SLright1'>
          <img src={wudi} alt="" />
         
        </div>


        </div>

     


      </div>

    </div>
  )
}

export default Lntelligent
